﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/themes/custom-theme/jquery-ui-1.8.20.custom.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/content.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/apprise.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/token-input.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/autoSuggest.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/token-input-facebook.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.7.2.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.20.custom.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/json2.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/apprise-1.5.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/shortcut.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.dropdown.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.uibuilder.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.tokeninput.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.autoSuggest.minified.js")" type="text/javascript"></script>

    <script type="text/javascript">
        function showToDoDialog() {
            $('#todo_description').val('');
            $('#todo').dialog({ buttons: { 'Save': saveToDo } });
        }

        function saveToDo() {
            $('#todo').dialog('close');
            var todo = { Description: $('#todo_description').val() };
            $.jsonSave('../ToDo/Save', todo, appendToToDoList);
        }

        function appendToToDoList(todo) {
            $('<li>' + todo.Description + '</li>').insertBefore($('#todoItems li').last());
            $('#todoItems li').addClass('ui-widget-header');
            $('#todoItems li').addClass('ui-state-default');
        }

        $(function () {
            $('#contentMenu').dropdown();
            $('#todoMenu').dropdown();
            $.getJSON('../ToDo/Index', function (data) {
                $(data).each(function (index, element) {
                    appendToToDoList(element);
                });
            });
        });
    </script>
    <style>
        body {
            width: 850px;
        }
    </style>
</head>
<body>
    <div class="bodyHeader">
        <a href="../Content/Index"><img src="../images/mmc_logo_white.png" /></a>
    </div>
    <div class="siteNavigation">
        <a href="#">Search</a>

        <ul id="contentMenu">
            <li class="ui-corner-all">Add Content
                <ul>
                    <li><a href="javascript: showToDoDialog()">To Do</a></li>
                    <li><a href="../Story/Create">Story</a></li>
                    <li><a href="../Character/Create">Character</a></li>
                    <li>Blog</li>
                </ul>
            </li>
        </ul>

        <ul id="todoMenu">
            <li>[To Do Icon]
                <ul id="todoItems">
                    <li>More...</li>
                </ul>
            </li>
        </ul>
    </div>

    <div id="content">
        @RenderBody()
        <br style="clear: both" />
    </div>

    <div id="todo" style="display: none" title="To Do">
        <div>
            <textarea id="todo_description" cols="40" rows="4"></textarea>
        </div>
    </div>
</body>
</html>